<template>
	<div class="system-edit-user-container">
		<el-drawer v-model="isShowDrawer" :title="(ruleForm.id !== 0 ? '修改' : '添加') + '设备网关'" direction="ttb" size="80%">
			<el-container style="height: 100%">
				<el-header style="height: 18%; margin-top: 10px">
					<el-card shadow="always" class="layout-padding-auto" style="height: 100%">
						<el-steps :active="stepIndex" align-center finish-status="success">
							<el-step title="选择接入方式" description="自定义设备接入" />
							<el-step title="选择网络组件" description="选择与设备通信的网络组件" />
							<el-step title="选择网络协议" description="使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作" />
							<el-step title="完成" description="填写基本信息" />
						</el-steps>
					</el-card>
				</el-header>
				<el-main style="height: 80%">
					<el-card shadow="always" class="layout-padding-auto" style="height: 100%">
						<el-tabs tab-position="left" style="height: 100%" v-model="tabIndex">
							<el-tab-pane label="接入方式" name="first" disabled>
								<el-space wrap alignment="flex-start" fill :fill-ratio="20" style="height: 100%; overflow-y: auto">
									<el-card shadow="hover" style="width: 400px" :body-style="{ padding: '0px 0px 10px 0px' }">
										<template #header>
											<el-row :gutter="20" align="middle" justify="space-between">
												<el-col :span="6">
													<img :src="networkBg" width="90" height="90" />
												</el-col>
												<el-col :span="12">
													<div class="work-break" style="font-weight: bolder">MQTT Broker接入</div>
												</el-col>
												<el-col :span="6"><el-button type="primary" @click="netWorkAccess('MQTT')">接入</el-button></el-col>
											</el-row>
										</template>
										<div style="padding: 20px 30px">适用于设备不直接接入平台，而是通过第三方MQTT服务接入的场景</div>
									</el-card>
								</el-space>
							</el-tab-pane>
							<el-tab-pane label="网络组件" name="second" disabled>
								<el-space wrap alignment="flex-start" fill :fill-ratio="20" style="height: 100%; overflow-y: auto">
									<el-card
										class="tick_selected"
										v-for="i in 2"
										:key="i"
										shadow="hover"
										style="width: 400px"
										:body-style="{ padding: '0px 0px 0px 0px' }"
									>
										<template #header>
											<el-row :gutter="20" align="middle" justify="start">
												<el-col :span="9">
													<el-tag style="width: 100px; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: clip">
														MQTT客户端
													</el-tag>
												</el-col>
												<el-col :span="9">
													<div class="work-break" style="font-weight: bolder">测试网络组件</div>
												</el-col>
											</el-row>
											<el-row :gutter="20" align="middle" justify="start">
												<el-col :span="9">
													<img :src="networkBg" width="90" height="90" />
												</el-col>
												<el-col :span="15">
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">描述：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">详情：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">注册时间：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">所属部门：测试</div>
													</el-row>
												</el-col>
											</el-row>
										</template>
									</el-card>
								</el-space>
							</el-tab-pane>
							<el-tab-pane label="网络协议" name="third" disabled>
								<el-space wrap alignment="flex-start" fill :fill-ratio="20" style="height: 100%; overflow-y: auto">
									<el-card
										class="tick_selected"
										v-for="i in 1"
										:key="i"
										shadow="hover"
										style="width: 400px"
										:body-style="{ padding: '0px 0px 0px 0px' }"
									>
										<template #header>
											<el-row :gutter="20" align="middle" justify="start">
												<el-col :span="9">
													<el-tag style="width: 100px; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: clip">
														MQTT客户端
													</el-tag>
												</el-col>
												<el-col :span="9">
													<div class="work-break" style="font-weight: bolder">测试网络组件</div>
												</el-col>
											</el-row>
											<el-row :gutter="20" align="middle" justify="start">
												<el-col :span="9">
													<img :src="networkBg" width="90" height="90" />
												</el-col>
												<el-col :span="15">
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">描述：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">详情：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">注册时间：测试</div>
													</el-row>
													<el-row align="middle" justify="start">
														<div style="font-size: 12px; color: #9b9b9b; width: 180px" class="work-break-no-width">所属部门：测试</div>
													</el-row>
												</el-col>
											</el-row>
										</template>
									</el-card>
								</el-space>
							</el-tab-pane>
							<el-tab-pane label="基本信息" name="fourth" disabled>
								<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
									<el-form-item label="名称" prop="name">
										<el-input v-model="ruleForm.name" placeholder="请输入名称" />
									</el-form-item>
									<el-form-item label="所属部门" prop="deptId">
										<el-cascader
											:options="deptTree"
											:props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }"
											placeholder="请选择所属部门"
											clearable
											v-model="ruleForm.deptId"
											style="width: 60%"
										>
											<template #default="{ node, data }">
												<span>{{ data.deptName }}</span>
												<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
											</template>
										</el-cascader>
									</el-form-item>
									<el-form-item label="描述" prop="description" style="margin-top: 20px">
										<el-input v-model="ruleForm.description" type="textarea" placeholder="请输入描述" />
									</el-form-item>
								</el-form>
							</el-tab-pane>
						</el-tabs>
					</el-card>
				</el-main>
				<el-footer style="text-align: right">
					<el-button size="default" type="primary" :disabled="stepIndex === 1" @click="stepActive(0)">上一步</el-button>
					<el-button size="default" type="primary" :disabled="stepIndex === 4 || stepIndex === 1" @click="stepActive(1)">下一步 </el-button>
					<el-button size="default" type="primary" @click="onSubmit">修 改</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import networkBg from '/@/assets/iot/network.webp';

export default defineComponent({
	name: 'gatewayEdit',
	setup(prop, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const state = reactive({
			isShowDrawer: false,
			ruleForm: {
				id: 0,
				provider: '',
			},
			rules: {},
			// 步骤条
			stepIndex: 1,
			// tab index
			tabIndex: 'first',
		});
		// 打开弹窗
		const openDrawer = (row: any) => {
			state.ruleForm = row;
			state.isShowDrawer = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDrawer = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			closeDialog();
		};
		// 页面加载时
		onMounted(() => {});
		// 步骤条 tab index
		const stepActive = (index: number) => {
			if (index === 0 && state.stepIndex != 1) {
				state.stepIndex = state.stepIndex - 1;
			} else if (index == 1 && state.stepIndex != 4) {
				state.stepIndex = state.stepIndex + 1;
			}
			if (state.stepIndex == 1) {
				state.tabIndex = 'first';
			} else if (state.stepIndex == 2) {
				state.tabIndex = 'second';
			} else if (state.stepIndex == 3) {
				state.tabIndex = 'third';
			} else if (state.stepIndex == 4) {
				state.tabIndex = 'fourth';
			}
		};
		// 接入方式
		const netWorkAccess = (type: string) => {
			console.log(type);
			state.stepIndex = state.stepIndex + 1;
			state.tabIndex = 'second';
		};
		return {
			netWorkAccess,
			stepActive,
			networkBg,
			openDrawer,
			closeDialog,
			onCancel,
			onSubmit,
			formRef,
			...toRefs(state),
		};
	},
});
</script>
<style lang="scss">
.el-step__icon-inner {
	font-size: 18px !important;
}
.el-tabs__content {
	height: 100%;
	overflow-y: auto;

	.el-tab-pane {
		width: 100%;
		height: 100%;
	}
}
.tick_selected {
	color: #79bbff;
	border: 0.02rem solid #79bbff;
	position: relative;
	transition: all 0.5s ease;
}
.tick_selected::after {
	content: '✔';
	display: block;
	height: 0px;
	width: 0px;
	position: absolute;
	bottom: 0;
	right: 0;
	color: #fff;
	/**对号大小*/
	font-size: 10px;
	line-height: 8px;
	border: 10px solid;
	border-color: transparent #4884ff #4884ff transparent;
}
</style>
